<template>
      <div style="text-align: center">
        <!--尾部服务-->
        <div class="server">
          <div class="toper-server">
            <ul>
              <li>
                <span>
                  <el-icon><Medal /></el-icon>
                </span>
                <h4>鲜花电商龙头</h4>
                <p>销量领先，权威认证龙头企业</p>
              </li>
              <li>
                <span>
                  <el-icon><GoldMedal /></el-icon>
                </span>
                <h4>55年品牌 真实口碑</h4>
                <p>最新评价99999条</p>
              </li>
              <li>
                <span>
                  <el-icon><MagicStick /></el-icon>
                </span>
                <h4>鲜花送前实拍展示</h4>
                <p>展现送前实拍的网站</p>
              </li>
              <li>
                <span>
                  <el-icon><Van /></el-icon>
                </span>
                <h4>3小时送达</h4>
                <p>全国连锁，3小时送2000城市</p>
              </li>
            </ul>
          </div>
        </div>
        <!--尾部导航-->
        <div class="footer-nav">
          <a href="/">首页</a> <b>|</b>
          <a href="" target="_blank">关于我们</a> <b>|</b>
          <a href="" target="_blank">媒体报道</a> <b>|</b>
          <a href="" target="_blank">联系方式</a> <b>|</b>
          <a href="" target="_blank">企业团购</a> <b>|</b>
          <a href="" target="_blank">花店入驻</a> <b>|</b>
          <a href="" target="_blank">在线补款</a> <b>|</b>
          <a class="last-child" href="" target="_blank">为什么选择我们</a>
        </div>
        <div class="auth">
          <a href="" target="_blank"><img src="//img02.hua.com/pc/assets/img/cxwz.gif" height="40" width="112"></a>
          <a href="" rel="nofollow" target="_blank"><img src="//img02.hua.com/pc/assets/img/smyz.gif" height="40" width="106"></a>
          <img src="http://lixinghe.meimeng.eu.org/flower/image/logo%E9%80%8F%E6%98%8E.png" height="50" width="212">
          <a href="" rel="nofollow" target="_blank"><img src="//img02.hua.com/pc/assets/img/zfb.gif" height="49" width="96"></a>
          <a href="" target="_blank"><img src="//img02.hua.com/pc/assets/img/100.jpg" height="49" width="150"></a>
        </div>
        <p class="xia" style="font-size:16px"><a href="" rel="nofollow" target="_blank" title="中国花卉协会会员">中国花卉协会会员</a> <a href="" rel="nofollow" target="_blank">中国电子商务协会会员</a> ICP经营许可证：<a>xxxxxx</a> <b>|</b>Copyright © 2005-2022</p>
        <p class="xia" style="font-size:16px">鲜花礼品网 <a href="/">www.flower.com</a> 中国领先的鲜花网品牌，鲜花速递专家！</p>
      </div>
</template>

<script>
  export default {
    name: "footer"
  }
</script>

<style scoped lang="scss">
  * {
    padding: 0;
    margin: 0;
  }
  a {
    text-decoration: none;
    color: #999999;
  }
  li {
    list-style-type: none;
  }
  .server {
    padding: 50px 0 30px 20px;
    border-top: 2px solid #eee;
    .toper-server {
      width: 990px;
      margin: 0 auto;
      padding: 0;
      ul {
        height: 40px;
        li {
          position: relative;
          display: block;
          float: left;
          height: 40px;
          margin: 0 29px;
          h4 {
            font-size: 16px;
            margin: 0 0 5px 50px;
            text-align: left;
            color: #4d4d4d;
          }
          p {
            font-size: 12px;
            margin-bottom: 0;
            margin-left: 50px;
            color: #999999;
            text-align: left;
          }
        }
        li:first-child{
          margin-left: 10px;
        }
      }
      span {
        color: orangered;
        font-size: 40px;
        position: absolute;
        left: 12px;
      }
    }
  }
  p {
    margin: 0 0 10px;
  }
  .footer-nav {
    font-size: 12px;
    width: 1200px;
    margin: 30px auto;
    text-align: center;
    color: #d9d9d9;
    a {
      margin: 0 26px;
      &:hover {
        color: orange;
        text-decoration: silver;
      }
    }
  }
  b{
    font-weight: bold;
  }
  .xia a:hover{
    color: orange;
  }
  .auth {
    margin: 20px 0 30px;
  }
</style>
